import React,{useEffect,useState} from 'react';
import { EChartsOption } from 'echarts'
import Echart from './index';
import { data_simpleData } from '../api/api';

function Bing(props) {
    var [val,setVal] = useState([])
    useEffect(()=>{
      data_simpleData().then((res)=>{
    
       var options = res.data.data.map((item)=>{
          var obj = {
             value:item.val,
             name:item.x
          }
          return obj
       })
       setVal(options)
      })
      
    },[])
    const option = {
      legend: {
        top: 'bottom',
        show:false

      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      series: [
        {
          name: 'Nightingale Chart',
          type: 'pie',
          radius: [30, 100],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 8
          },
          data: val
        }
      ]
    };
    return (
       <Echart option={option}/>
    );
}

export default Bing;